import {Radio , Button, Form, Input, Checkbox, Row, notification, Image} from 'antd';
import BasePage from "../base";
import {InfoCircleOutlined } from '@ant-design/icons';
import React, {useEffect, useState} from "react";
import {useHistory, useModel} from 'umi';
import {Content} from "antd/es/layout/layout";
import request from "umi-request";

export default function RetrievePage() {
    const [form] = Form.useForm();
    const history = useHistory()
    const {initialState} = useModel('@@initialState');

    const [username, setUserName] = useState("")
    const [password, setPassWord] = useState("")
    const [repeatPwd, setRepeatPwd] = useState("")
    const [requiredMark] = useState('optional');

    const successRegistration = type => {
        notification[type]({
            message: 'Success!',
            duration: 2,
            description: 'Change your password successfully!',
        });
    };

    const errorRegistration = type => {
        notification[type]({
            message: 'Error!',
            duration: 2,
            description:
                'Sorry, something went wrong.',
        });
    };

    useEffect(() => {
        if(sessionStorage.getItem("isLogin") !== "1"){
            history.push("/404")
        }
    })

    function retrieveInfo(status) {
        switch (status) {
            case true:
                successRegistration('success')
                sessionStorage.setItem("isLogin", "1");
                history.push('/')
                break
            case false:
                errorRegistration('error')
        }
    }

    function handleRetrieve() {
        if(!verifyPassword()){
            retrieveInfo(false)
            return
        }

        let url = initialState.BACK_END_URL + "register";
        let formData = new FormData();
        formData.append('name', username);
        formData.append('pwd', password);
        request
            .post(url, {
                mode: 'cors',
                body: formData
            })
            .then(function (response) {
                retrieveInfo(response)
            })
            .catch(function (error) {
                history.push('/500')
            });
    }

    function verifyPassword() {
        return password === repeatPwd;
    }

    return (
        <BasePage>
            <Content
                className="site-layout"
                style={{padding: '40px 30px', marginLeft:350 ,marginTop: 64}}
            >
                <Form
                    form={form}
                    wrapperCol={{
                        span: 12,
                    }}
                    layout="vertical"
                    requiredMark={requiredMark}
                >
                    <Form.Item  label="Username" required tooltip={"Username is required"}>
                        <Input  placeholder="input your username"
                                onChange={e => {
                                    setUserName(e.target.value)
                                }}/>
                    </Form.Item>
                    <Form.Item label="Password" required tooltip="Password is required">
                        <Input.Password placeholder="input your password"
                                        onChange={e => {
                                            setPassWord(e.target.value)
                                        }}/>
                    </Form.Item>
                    <Form.Item label="Repeat Password" required>
                        <Input.Password placeholder="repeat your password"
                                        onChange={e => {
                                            setRepeatPwd(e.target.value)
                                        }}/>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" onClick={handleRetrieve}>确认修改</Button>
                    </Form.Item>
                </Form>
            </Content>
        </BasePage>
    );
}
